<template>
	<view class="page">
		<view class="Info">
			<view class="row j-sb a-center">
				<view class="title">收货人信息</view>
				
				<view class="Copy" @click.stop="$common.setClip(copyTxt)">
					<image src="../../static/cope.png" class="copy_icon"></image>
				</view>
			</view>
			
			<view class="item flex-box">
				<text class="name">姓名</text>
				<text class="msg flex" selectable>{{ pageData.uname?pageData.uname:'--' }}</text>
			</view>
			<view class="item flex-box">
				<text class="name">电话</text>
				<text class="msg flex" selectable>{{ pageData.utel?pageData.utel:'--' }}</text>
			</view>
			<view class="item flex-box">
				<text class="name">地址</text>
				<text class="msg flex" selectable>{{ pageData.address?pageData.address:'--' }}</text>
			</view>
			<view class="item flex-box">
				<text class="name">备注</text>
				<text class="msg flex" selectable>{{ pageData.remarks?pageData.remarks:'无' }}</text>
			</view>
		</view>
		<view class="Info">
			<picker mode="selector"  :range="Companys" range-key="courier_name" @change="change">
				
				<view class="d-flex a-center j-sb">
					<text class="msg">快递公司</text>
					<view class="d-flex a-center">
					<text class="size26" :class="courier_name?'color_33':'color_99'">{{courier_name?courier_name:'请选择对应快递公司'}}</text>
					<text class="iconfont icon-more"></text>
					</view>
				</view>
			</picker>
		</view>
		
		
		<view class="Info">
			<view class="flex-box align-center">
				<text class="msg">{{courier_code == "MySelf"?'配送电话':'快递单号'}}</text>
				<input type="text" class="flex" v-model="Numbers" 
				     :placeholder="courier_code == 'MySelf'?'请输入配送电话':'请输入快递单号'"
					  placeholder-class="pla"/>
				<view class="iconfont icon-saoma color_99 size32 p-left20" @click.stop="scanCode"></view>
			</view>
		</view>
		
		<view class="btn-box" @click="sendout">确定发货</view>
		
		
		<view class="menus flex-box align-center">
			<text class="iconfont icon-back" :class="{back:showMore}" @click="showMore = !showMore"></text>
			<view class="flex-box align-center ul" :class="{show: showMore}">
				<view @click="back()">
					<text class="iconfont icon-icon121"></text>
					<view>返回</view>
				</view>
				<view @click="backHome">
					<text class="iconfont icon-icon12"></text>
					<view>首页</view>
				</view>
				<view :class="{unread: parseFloat(chatNum) > 0}"  :data-num='chatNum'>
					<text class="iconfont icon-icon13"></text>
					<view>客服</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import WX from 'jweixin-module';
	let that;
	export default {
		data() {
			return {
				Companys: [],
				courier_name:'',
				courier_code:'',
				Numbers:'',
				showMore:false,
				order_id:'',
				pageData:'',
				chatNum: 0,
				copyTxt:''
				
				
			};
		},
		onLoad(e) {
			that = this
			if(e.order_id){
				that.order_id = e.order_id
			}
			that.getDetail()
			API.user.getChatNum().then(num => {
				that.chatNum = num
			})
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		methods:{
			getDeliveryWay(){
				that.$http.get({
					url: '/singleSaleManageApi/getDeliveryWay'
				}).then(res => {
					if(res.code == 200 && res.data){
						that.Companys = res.data
					}
				})
			},
			getDetail(){
				that.$http.get({
					url: '/singleSaleManageApi/orderDetail',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						order_id: that.order_id
					}
				}).then(res => {
					if(res.errcode != 100) return;
					const result = res.data;
					that.pageData = result;
					that.copyTxt = result.copySendInfo.replace(/\\n/g, '\n');
					that.getDeliveryWay()
					
				})
			},
			change(e){
				that.courier_name = that.Companys[e.detail.value].courier_name
				that.courier_code = that.Companys[e.detail.value].courier_code
			},
			sendout(){
				if(!that.courier_name.trim()){
					uni.showToast({title:'请选择快递公司',icon:'none'})
					return
				}
				if(!that.Numbers.trim()){
					if(that.courier_code == 'MySelf'){
						uni.showToast({title:'请输入配送电话',icon:'none'})
					}else{
						uni.showToast({title:'请输入快递单号',icon:'none'})
					}
					
					return
				}
				that.$http.post({
					url: '/singleSaleManageApi/sendGoods',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						order_id: that.order_id,
						courier_code: that.courier_code,
						courier_tel: that.Numbers,
						courier_num: that.Numbers,
						courier_name: that.courier_name
					}
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon:'none'
					})
					if (res.code == 200) {
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			},
			scanCode(){
				let that = this;
				this.$http.get({
					url:'/singleSaleManageApi/getJsConfig',
				}).then(res=>{
					if(!res) return;
					WX.config({
						debug: false,
						appId:res.appId,
						timestamp: res.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.nonceStr, // 必填，生成签名的随机串
						signature: res.signature, // 必填，签名
						jsApiList: res.jsApiList // 必填，需要使用的 JS 接口列表
					})
					WX.ready(function(){
						WX.scanQRCode({
							needResult:1,
							canType: ["qrCode","barCode"],
							success:function(result){
								const pageData = result.resultStr.split(',');
								if(pageData.length > 1){
									that.Numbers = pageData[1];
								}else{
									that.Numbers = result.resultStr;
								}
							}
						})
					});
					WX.error(function(err){
						console.log(err,'err');
					})
				})
				
			},
		},
	}
</script>

<style lang="scss">
	.absoluteWh{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
	}
	.Infos{
		width:100%;
		height: 100rpx;
		background-color: #fff;
		position: relative;
		display: flex;
		align-items: center;
	}
.page{
	padding: $page-space;
	
	.Info{
		padding: $page-space;
		margin-bottom: $page-space;
		border-radius: $border-radius-base;
		background-color: #FFFFFF;
		position: relative;
		z-index: 3;
		
		
		.title{
			color: #999999;
			font-weight: 400;
			color: #999999;
			font-size: 24rpx;
		}
		.item{
			margin-top: 20rpx;
			.name{
				color: #666666;
				font-size: 28rpx;
				margin-right: 30rpx;
			}
			
		}
		.msg{
			font-size: 28rpx;
		}
		input{
			text-align: right;
			font-size: 28rpx;
		}
		.icon-more{
			font-size: 32rpx;
			margin-left: 30rpx;
		}
	}
	
	.btn-box{
		font-size: $font-size-lg;
		text-align: center;
		background: #FF784A linear-gradient(157deg, rgba(255, 255, 255, 0.37) 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 44rpx;
		line-height: 88rpx;
		color: $fff;
		margin: 128rpx 58rpx;
	}

	.menus{
		height: 90rpx;
		// width: 322rpx;
		min-width: 66rpx;
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		right: 0;
		z-index: 3;
		bottom: calc(168rpx + constant(safe-area-inset-bottom));
		bottom: calc(168rpx + env(safe-area-inset-bottom));
		border-radius: 44rpx 0 0 44rpx;
		text-align: center;
		color: $fff;
		.icon-back{
			color: inherit;
			font-size: 34rpx;
			margin-left: 20rpx;
			&.back{
				transition: all .2s;
				transform: rotate(180deg);
			}
		}
		.ul{
			width: 0;
			overflow: hidden;
			justify-content: space-around;
		}
		.show{
			width: 256rpx;
		}
		view{
			color: inherit;
			.iconfont{
				color: inherit;
				font-size: 42rpx;
				position: relative;
			}
		}
	
		.unread::after{
			top: 0;
		}
	}
}
.Copy{
	width:50rpx;
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.copy_icon{
	width:30rpx;
	height: 30rpx;
}
.textArea{
	width:100%;
	height: 300rpx;
	border:1px solid red;
	background-color: #fff;
}
</style>
